この手順では、Visual Studio で、TileListBox for UWP を使用して UWP アプリケーションを作成します。

次の手順に従います。

1. Visual Studio で、［ファイル］→［新規作成］→［プロジェクト］を選択します。
2. ［新しいプロジェクト］ダイアログボックスで、左ペインの言語を展開し、言語の下で［Windows ストア］を選択し、テンプレートリストで［新しいアプリケーション (XAML)］を選択します。名前を入力し、［OK］をクリックしてプロジェクトを作成します。
3. MainPage.xaml が開いていない場合は開きます。<Grid> タグと </Grid> タグの間にカーソルを置き、１回クリックします。
4. <Grid> タグと </Grid> タグの間に次の <StackPanel> マークアップを追加して、TextBlock と ProgressBar を含む StackPanel を追加します。

   	コードのコピー
   <StackPanel x:Name="loading" VerticalAlignment="Center">     <TextBlock Text="YouTubeからデータを取得しています..." TextAlignment="Center"/>     <ProgressBar IsIndeterminate="True" Width="200" Height="4"/>  </StackPanel>

   この TextBlock と ProgressBar は、C1TileListBox が読み込み中であることを示します。
5. ツールボックスに移動し、C1TileListBox アイコンをダブルクリックして、コントロールをグリッドに追加します。これで、参照と XAML 名前空間が自動的に追加されます。
6. <Xaml:C1TileListBox> タグを編集して、コントロールをカスタマイズします。

   	コードのコピー
   <Xaml:C1TileListBox x:Name="tileListBox" ItemsSource="{Binding}" Background="Transparent" Visibility="Collapsed" ItemWidth="800" ItemHeight="600" RefreshWhileScrolling="False"></Xaml:C1TileListBox>

   これは、コントロールに名前を付け、コントロールの連結、背景、表示/非表示、サイズ、および更新機能をカスタマイズします。
7. <Xaml:C1TileListBox> タグと </Xaml:C1TileListBox> タグの間に次のマークアップを追加します。

   コードのコピー

   <Xaml:C1TileListBox.PreviewItemTemplate>         <DataTemplate>             <Grid Background="Gray"/>         </DataTemplate>             </Xaml:C1TileListBox.PreviewItemTemplate>             <Xaml:C1TileListBox.ItemTemplate>         <DataTemplate>         <Grid Background="LightBlue">             <Image Source="{Binding Thumbnail}" Stretch="UniformToFill"/>             <TextBlock Text="{Binding Title}" Foreground="White" Margin="4 0 0 4" VerticalAlignment="Bottom"/>             </Grid>         </DataTemplate>     </Xaml:C1TileListBox.ItemTemplate>

8. このマークアップは、C1TileListBox コントロールのコンテンツのデータテンプレートを追加します。このコントロールの連結はコードで行います。

ここまでの成果

これで、C1TileListBox コントロールを含む UWP スタイルのアプリケーションを作成できました。次の「手順2：TileListBox へのデータの追加」では、C1TileListBox にデータを追加します。